<template>
  <ScreenLayoutWithMenu title="环境监测大屏">
    <div class="screen-grid grid-2x3">
      <ChartCard title="温度趋势" grid-area="a">
        <ECharts :option="temperatureOption" />
      </ChartCard>
      <ChartCard title="空气质量" grid-area="b">
        <ECharts :option="airQualityOption" />
      </ChartCard>
      <ChartCard title="环境指标" grid-area="c">
        <div class="kpi-container">
          <div class="kpi-item">
            <div class="kpi-label">温度</div>
            <div class="kpi-value">22.5°C</div>
            <div class="kpi-change positive">正常</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">湿度</div>
            <div class="kpi-value">55.3%</div>
            <div class="kpi-change positive">正常</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">PM2.5</div>
            <div class="kpi-value">32</div>
            <div class="kpi-change positive">优</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="能耗统计" grid-area="d">
        <ECharts :option="energyOption" />
      </ChartCard>
      <ChartCard title="设备运行状态" grid-area="e">
        <ECharts :option="equipmentOption" />
      </ChartCard>
      <ChartCard title="环境质量分布" grid-area="f">
        <ECharts :option="qualityDistributionOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const temperatureOption = ref({})
const airQualityOption = ref({})
const energyOption = ref({})
const equipmentOption = ref({})
const qualityDistributionOption = ref({})

onMounted(() => {
  const hours = Array.from({ length: 24 }, (_, i) => `${i}时`)
  
  temperatureOption.value = getLineOption({
    categories: hours,
    series: [{
      name: '温度(°C)',
      data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 10) + 18)
    }]
  })

  airQualityOption.value = getBarOption({
    categories: ['优', '良', '轻度污染', '中度污染'],
    series: [{
      name: '天数',
      data: [25, 4, 1, 0]
    }]
  })

  energyOption.value = getLineOption({
    categories: hours,
    series: [{
      name: '能耗(kWh)',
      data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 500) + 1000)
    }]
  })

  equipmentOption.value = getBarOption({
    categories: ['运行中', '待机', '维护', '故障'],
    series: [{
      name: '设备数',
      data: [85, 10, 3, 2]
    }]
  })

  qualityDistributionOption.value = getPieOption({
    name: '质量等级',
    data: [
      { value: 25, name: '优' },
      { value: 4, name: '良' },
      { value: 1, name: '轻度污染' },
      { value: 0, name: '中度污染' }
    ]
  })
})
</script>
